<template>
	<el-dialog title="角色权限设置" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
				<div class="treeMenu">
					<el-tree v-loading="treeLoading" ref="menu" node-key="id" :data="menu.list"  :default-checked-keys="menu.defaultChecked" :props="menu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="数据权限">
				<el-form :model="dataForm"  ref="dataForm" label-width="120px" label-position="left">
					<el-form-item label="权限类型" prop="dataType">
						<el-select v-model="dataForm.dataType" @change="dpTypeChange">
							<el-option :value="0" label="无"></el-option>
							<el-option :value="1" label="根据组织级别"></el-option>
							<el-option :value="2" label="根据组织范围(未开源)"></el-option>
							<el-option :value="3" label="根据自定义表达式(未开源)"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="组织结构级别" prop="dataLevel" v-if="dataForm.dataType == 1">
						<el-select v-model="dataForm.dataLevel" @change="dataLevelChange">
							<el-option :value="-2" label="无"></el-option>
							<el-option :value="-1" label="全平台"></el-option>
							<el-option :value="0" label="全租户"></el-option>
							<el-option :value="1" label="全分公司"></el-option>
							<el-option :value="2" label="全部门"></el-option>
							<el-option :value="3" label="个人"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="includeLowLabel" prop="includeLow" v-if="dataForm.dataLevel == 2 || dataForm.dataLevel == 3">
						<el-select v-model="dataForm.includeLow">
							<el-option :value="-1" label="无"></el-option>
							<el-option :value="0" label="否"></el-option>
							<el-option :value="1" label="是"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaving" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
        treeLoading:false,
				roleId:"",
				includeLowLabel:"",
				visible: false,
				isSaving: false,
				dataForm:{
					dataType:0,
					dataLevel:-2,
					includeLow:-1,
					customExpression:"",
				},
				menu: {
					list: [],
					defaultChecked: [],
					props: {
						label: (data)=>{
							return data.meta.title
						}
					},
				},

			}
		},
		mounted() {
			this.getMenu();
		},
		methods: {
			open(){
				this.visible = true;
				return this
			},
			async submit(){
				var menu_halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
				var menu_allCheckKeys = this.$refs.menu.getCheckedKeys();
				this.isSaving = true;
				var param ={
					roleId:this.roleId,
					menuHalfCheckIds:menu_halfCheckedKeys,
					menuAllCheckIds:menu_allCheckKeys,
					dataType:this.dataForm.dataType,
					dataLevel:this.dataForm.dataLevel,
					includeLow:this.dataForm.includeLow,
				};
				var res = await this.$API.system.role.editRolePerm.post(param);
				if(res.success){
					this.isSaving = false;
					this.visible = false;
					this.$message.success("配置权限成功")
					this.$emit('success')
				}
			},
			async getMenu(){
        this.treeLoading = true;
				var res = await this.$API.system.menu.list.get();
				this.menu.list = res.data;
        this.treeLoading = false;
			},
			//注入数据
			setData(data){
				this.roleId = data.id;
				var permissions = data.permissions;
				var menuCheck = [];
				permissions.forEach(p =>{
					if(p.isAllCheck == 1)menuCheck.push(p.permissionId);
				})
				this.menu.defaultChecked  = menuCheck;
				this.dataForm.dataType = data.dataType;
				this.dataForm.dataLevel = data.dataLevel;
				this.dataForm.includeLow = data.includeLow;
			},
			dpTypeChange(){
				//每次选择清空原来的值
				this.dataForm.dataLevel = -2;
				this.dataForm.includeLow = -1;
			},
			dataLevelChange(){
				if(this.dataForm.dataLevel == 2){
					this.includeLowLabel = "是否含下级部门";
				}else if(this.dataForm.dataLevel == 3){
					this.includeLowLabel = "是否含下级员工";
				}else{
					this.includeLowLabel = "";
				}
				this.dataForm.includeLow = -1;
			}
		}
	}
</script>

<style scoped>
  .treeOrg {width:400px;height:300px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
	.treeMenu {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>
